import { React, useState, useEffect } from "react";
import { Space, Table, Tag, Button, Modal, Form, Input, message } from "antd";
import { getKeyList } from "../../api";
import { useNavigate } from "react-router-dom";
import "./index.less";
const columns = [
  {
    title: "创建时间",
    dataIndex: "createdAt",
    key: "createdAt",
    width: `16%`,
  },
  {
    title: "值",
    dataIndex: "value",
    key: "value",
    width: `30%`,
  },
  {
    title: "状态",
    key: "status",
    dataIndex: "status",
    render: (_, { status }) => (
      <>
        <Tag color="green">{status}</Tag>
      </>
    ),
  },
  {
    title: "操作",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <a>Invite</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [key, setKey] = useState("");
  const [notes, setNotes] = useState("");
  const navigate = useNavigate();

  // 定义一个表格数据
  const [tableData, setTableData] = useState([
    {
      key: "1",
      createdAt: "2021-10-10 10:10:10",
      value: "New York No. 1 Lake Park",
      status: "open",
    },
  ]);

  //   打开弹窗
  const showModal = () => {
    setIsModalOpen(true);
  };
  //   确认事件
  const handleOk = () => {
    // 判断key是否为空
    if (!key) {
      message.error("请输入key");
      return;
    }
    const pt_key = key.match(/pt_key=[^;]*;.*pt_pin=[^;]*;/);
    // 判断key是否符合规则
    if (!pt_key) {
      message.error("请输入正确的key");
      return;
    }
    setTableData([
      ...tableData,
      {
        key: tableData.length + 1,
        cookie: pt_key,
        tags: ["nice", "developer"],
      },
    ]);
    setIsModalOpen(false);
  };
  //   取消事件
  const handleCancel = () => {
    setIsModalOpen(false);
  }; 

  //  获取key列表
  const getKey = () => {
    getKeyList().then((res) => {
      if (res.code === 200) {
        let data = res.data.map((item, index) => {
          return {
            key: index + 1,
            createdAt: item.createdAt,
            value: item.value,
            status: item.status,
          };
        });
        setTableData(data);
      } else {
        message.error(res.msg);
        navigate("/login");
      }
    });
  };
  useEffect(() => {
    getKey();
  }, []);

  return (
    <div className="App">
      <div className="BtnBox">
        <h2>Cookie管理面板</h2>
        <Button type="primary" className="Btn" onClick={showModal}>
          添加cookie
        </Button>
      </div>
      {/* 列表 */}
      <Table className="p20" columns={columns} dataSource={tableData} />
      {/* 弹窗 */}
      <Modal
        title="创建变量"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form layout="vertical">
          <Form.Item required label="值">
            <Input
              placeholder="请输入名称"
              value={key}
              onChange={(e) => setKey(e.target.value)}
            />
          </Form.Item>
          <Form.Item label="备注">
            <Input
              placeholder="请输入值"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default App;
